import React, { memo, useState, useRef } from "react";
import { CommentWrap } from "./style";
import { Mentions } from "antd";
import { getSizeImage, getMonthDayHouMin } from "@/utils/format-utils";
import { NavLink } from "react-router-dom";
import Loading from "@/components/loading";
import { emojiImg, level } from "@/services/local-data";
import { sendComment } from "@/services/sendComment";
import CommentSpan from "@/components/aboutComment/commentSpan";
import SecondComment from "@/components/aboutComment/secondComment";

export default memo(function Comment(props) {
  const id = props.id;
  const type = props.type;
  const t = props.t;
  const [page, setPage] = useState(1);
  const mentiosRef = useRef();
  const nccRef = useRef();
  const { Option } = Mentions;
  const userInfo = JSON.parse(window.localStorage.getItem("userInfo"));

  const loginHeader =
    userInfo && userInfo.length !== 0 ? userInfo.data.profile : [];
  const userId =
    loginHeader && loginHeader.length !== 0 ? userInfo.data.profile.userId : "";
  const commentId =
    props.comments.code === 200 ? props.comments.comments[0].commentId : "";

  const onChange = (value) => {};
  const onSelect = (option) => {};
  const provied = () => {
    setPage(1);
  };

  const next = () => {
    setPage(2);
  };

  document.addEventListener("click", (e) => {
    if (
      e.target.parentNode.className !== "emojiR" &&
      e.target.parentNode.className !== "emojid" &&
      e.target.parentNode.className !== "emojiImg" &&
      e.target.parentNode.className !== "nextpro" &&
      e.target.parentNode.className !== "page" &&
      e.target.parentNode.className !== "emojiDiv"
    ) {
      if (document.getElementById("emojiDiv") != null) {
        document.getElementById("emojiDiv").style.display = "none";
      }
    }
  });

  const emojiClcik = () => {
    mentiosRef.current.focus();
    if (document.getElementById("emojiDiv").style.display === "none") {
      document.getElementById("emojiDiv").style.display = "block";
    } else {
      document.getElementById("emojiDiv").style.display = "none";
    }
  };

  const gotoInput = (title) => {
    mentiosRef.current.focus();
    if (mentiosRef.current.textarea.selectionStart != null) {
      mentiosRef.current.state.value =
        mentiosRef.current.textarea.value.substring(
          0,
          mentiosRef.current.textarea.selectionStart
        ) +
        "[" +
        title +
        "]" +
        mentiosRef.current.textarea.value.substring(
          mentiosRef.current.textarea.selectionStart
        );
      return;
    }
    mentiosRef.current.state.value =
      mentiosRef.current.textarea.value + "[" + title + "]";
  };

  const sendCommentAxios = () => {
    sendComment(t, type, id, mentiosRef.current.textarea.value).then((res) => {
      if (res.code === 200) {
        mentiosRef.current.state.value = "";
      }
    });
  };

  return (
    <CommentWrap>
      <div className="comment-box">
        <span>评论</span>
        <span>
          共{props.comments.code === 200 ? props.comments.total : ""}条评论
        </span>
      </div>
      <div id="comment-send">
        <img
          className="userHead"
          src={
            loginHeader != null
              ? loginHeader.avatarUrl
              : "http://s4.music.126.net/style/web2/img/default/default_avatar.jpg?param=50y50"
          }
          alt=""
        />
        <div className="comment-right">
          <Mentions
            style={{ width: "100%", height: "63px", fontSize: "12px" }}
            onChange={onChange}
            onSelect={onSelect}
            autoSize={{ minRows: 2, maxRows: 3 }}
            ref={mentiosRef}
          >
            <Option value="afc163">afc163</Option>
            <Option value="zombieJ">zombieJ</Option>
            <Option value="yesmeck">yesmeck</Option>
          </Mentions>
          <div className="emojiat">
            <div className="emojiR">
              <i onClick={emojiClcik} className="emoji imgIcon"></i>
              <div id="emojiDiv" className="emojiDiv emtbg">
                <div className="emojid">
                  {page === 1
                    ? emojiImg.slice(0, 50).map((item, index) => {
                        return (
                          <span
                            key={index + Math.random()}
                            onClick={() => gotoInput(item.title)}
                            title={item.title}
                            className="emojiImg"
                          >
                            <img src={item.url} alt={item.title} />
                          </span>
                        );
                      })
                    : page === 2
                    ? emojiImg.slice(50, 60).map((item, index) => {
                        return (
                          <span
                            key={index + Math.random()}
                            onClick={() => gotoInput(item.title)}
                            title={item.title}
                            className="emojiImg"
                          >
                            <img src={item.url} alt={item.title} />
                          </span>
                        );
                      })
                    : ""}
                </div>
                <div className="nextpro">
                  <div className="page">
                    <i onClick={provied} className="provied btn-button"></i>
                    <em className="pagenum">{page}/2</em>
                    <i onClick={next} className="next btn-button"></i>
                  </div>
                </div>
              </div>
            </div>
            <i className="atb imgIcon"></i>
            <div onClick={sendCommentAxios} className="send">
              评论
            </div>
          </div>
        </div>
      </div>

      {props.comments.code === 200 ? (
        <>
          <div className="comment-best">
            {props.hotComment ? (
              props.hotComment.length !== 0 ? (
                props.pageNum == 1 ? (
                  <div>
                    <p>精彩评论</p>
                    <div className="comment-best-three">
                      {props.hotComment
                        ? props.hotComment.map((item, index) => {
                            return (
                              <div key={index} className="hot-comment-box">
                                <div className="hot-comment-s-box">
                                  <div>
                                    <NavLink
                                      to={{
                                        pathname: "/user/home",
                                        search: "?id=" + item.user.userId,
                                      }}
                                    >
                                      <img
                                        src={getSizeImage(
                                          item.user.avatarUrl,
                                          50
                                        )}
                                        alt=""
                                      />
                                    </NavLink>
                                  </div>
                                  <div className="hot-comment-s-box-xq">
                                    <NavLink
                                      to={{
                                        pathname: "/user/home",
                                        search: "?id=" + item.user.userId,
                                      }}
                                    >
                                      {item.user.nickname}
                                    </NavLink>
                                    <span>
                                      {item.user.vipRights ? (
                                        <img
                                          className="level"
                                          src={
                                            require("@/assets/img/lv" +
                                              item.user.vipRights.redVipLevel +
                                              ".png").default
                                          }
                                          alt=""
                                        />
                                      ) : (
                                        ""
                                      )}
                                      ：
                                    </span>
                                    <span className="hot-comment-content">
                                      &nbsp;
                                      <CommentSpan content={item.content} />
                                    </span>
                                    <SecondComment
                                      beReplied={
                                        item.beReplied != null
                                          ? item.beReplied
                                          : []
                                      }
                                    />
                                    <div className="hot-comment-bb">
                                      <div className="hot-comment-time">
                                        {getMonthDayHouMin(item.time)}
                                      </div>
                                      <div className="hot-comment-dz">
                                        {item.user.userId === userId ? (
                                          <div className="deleteD">
                                            <span className="delete">删除</span>
                                            <span className="shu">|</span>
                                          </div>
                                        ) : (
                                          <></>
                                        )}
                                        <i className="dz-icon icon2"></i>
                                        {item.likedCount === 0 ? (
                                          <></>
                                        ) : (
                                          item.likedCount
                                        )}
                                        <span className="shu">|</span>
                                        <span>回复</span>
                                      </div>
                                    </div>
                                  </div>
                                </div>
                              </div>
                            );
                          })
                        : ""}
                    </div>
                  </div>
                ) : (
                  ""
                )
              ) : (
                ""
              )
            ) : (
              ""
            )}

            <div className="new-comment-box">
              <p>
                最新评论(
                {props.comments.length !== 0 ? props.comments.total : ""})
              </p>
              {props.comments.length !== 0
                ? props.handCheck
                  ? props.comments.comments.slice(0, 20).map((item, index) => {
                      return (
                        <div key={index} className="new-comment-box">
                          <div className="new-comment-s-box">
                            <div>
                              <NavLink
                                to={{
                                  pathname: "/user/home",
                                  search: "?id=" + item.user.userId,
                                }}
                              >
                                <img
                                  src={getSizeImage(item.user.avatarUrl, 50)}
                                  alt=""
                                />
                              </NavLink>
                            </div>
                            <div className="new-comment-s-box-xq">
                              <NavLink
                                to={{
                                  pathname: "/user/home",
                                  search: "?id=" + item.user.userId,
                                }}
                              >
                                {item.user.nickname}
                              </NavLink>
                              <span>
                                {item.user.vipRights ? (
                                  <img
                                    className="level"
                                    src={
                                      require("@/assets/img/lv" +
                                        item.user.vipRights.redVipLevel +
                                        ".png").default
                                    }
                                    alt=""
                                  />
                                ) : (
                                  ""
                                )}
                                ：
                              </span>
                              <span className="new-comment-content">
                                &nbsp;
                                <CommentSpan content={item.content} />
                              </span>
                              <SecondComment
                                beReplied={
                                  item.beReplied != null ? item.beReplied : []
                                }
                              />
                              <div className="new-comment-bb">
                                <div className="new-comment-time">
                                  {getMonthDayHouMin(item.time)}
                                </div>
                                <div className="new-comment-dz">
                                  {item.user.userId === userId ? (
                                    <div className="deleteD">
                                      <span className="delete">删除</span>
                                      <span className="shu">|</span>
                                    </div>
                                  ) : (
                                    <></>
                                  )}
                                  <i className="dz-icon icon2"></i>
                                  {item.likedCount === 0 ? (
                                    <></>
                                  ) : (
                                    item.likedCount
                                  )}
                                  <span className="shu">|</span>
                                  <span>回复</span>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      );
                    })
                  : props.comments.comments
                  ? props.comments.comments.map((item, index) => {
                      return (
                        <div
                          ref={nccRef}
                          key={index}
                          className="new-comment-box"
                        >
                          <div className="new-comment-s-box">
                            <div>
                              <NavLink
                                to={{
                                  pathname: "/user/home",
                                  search: "?id=" + item.user.userId,
                                }}
                              >
                                <img
                                  src={getSizeImage(item.user.avatarUrl, 50)}
                                  alt=""
                                />
                              </NavLink>
                            </div>
                            <div className="new-comment-s-box-xq">
                              <NavLink
                                to={{
                                  pathname: "/user/home",
                                  search: "?id=" + item.user.userId,
                                }}
                              >
                                {item.user.nickname}
                              </NavLink>
                              <span>
                                {item.user.vipRights ? (
                                  <img
                                    className="level"
                                    src={
                                      require("@/assets/img/lv" +
                                        item.user.vipRights.redVipLevel +
                                        ".png").default
                                    }
                                    alt=""
                                  />
                                ) : (
                                  ""
                                )}
                                ：
                              </span>
                              <span className="new-comment-content">
                                &nbsp;
                                <CommentSpan content={item.content} />
                              </span>
                              <SecondComment
                                beReplied={
                                  item.beReplied != null ? item.beReplied : []
                                }
                              />
                              <div className="new-comment-bb">
                                <div className="new-comment-time">
                                  {getMonthDayHouMin(item.time)}
                                </div>
                                <div className="new-comment-dz">
                                  {item.user.userId === userId ? (
                                    <div className="deleteD">
                                      <span className="delete">删除</span>
                                      <span className="shu">|</span>
                                    </div>
                                  ) : (
                                    <></>
                                  )}
                                  <i className="dz-icon icon2"></i>
                                  {item.likedCount === 0 ? (
                                    <></>
                                  ) : (
                                    item.likedCount
                                  )}
                                  <span className="shu">|</span>
                                  <span>回复</span>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      );
                    })
                  : ""
                : ""}
            </div>
          </div>
          <div id="tcr"></div>
        </>
      ) : (
        <div className="loading">
          <Loading />
        </div>
      )}
    </CommentWrap>
  );
});
